<template>
  <ShowCard title="工作经历" margin>
    <template v-slot:right>
      <AButton name="新增工作经历" @click="toWorkExperience"></AButton>
    </template>
    <div
      class="work-item"
      v-for="(work, index) in works"
      :key="index"
      @click="() => toWorkExperience(work)"
    >
      <div class="work-item--top">
        <div class="work-item--top_left">
          <div class="work-item--top_left-title">{{ work.workUnit }}</div>
          <div class="work-item--top_left-subtitle">{{ work.category }}</div>
        </div>
        <div class="work-item--top_right">
          {{ work.startTime }}-{{ work.endTime }}
          <i class="iconfont icon-jiantou-right"></i>
        </div>
      </div>
      <div class="work-item--middle">内容：{{ work.workContent }}</div>
      <div class="work-item--bottom">
        <ATag v-for="tag in work.skillTag && work.skillTag.split(',')" :key="tag" :value="tag" />
      </div>
    </div>
  </ShowCard>
</template>

<script lang="ts">
import { toRef, PropType } from 'vue';
import Taro from '@tarojs/taro';
import { ShowCard, AButton, ATag } from '@/components';
import ParamsUtil from '@/utils/params';
import { RESUME_WORK_EDIT } from '@/const/h5';
import { IWork } from '@/types';
import './index.less';

export default {
  components: {
    ATag,
    ShowCard,
    AButton,
  },

  props: {
    data: {
      type: Array as PropType<IWork[]>,
      default: () => [],
    },
    resumeId: Number,
  },

  setup(props) {
    const works = toRef(props, 'data');

    const toWorkExperience = (work?: IWork) => {
      Taro.navigateTo({
        url: `/pages/webview/index?redirect=${encodeURIComponent(
          ParamsUtil.addParams(RESUME_WORK_EDIT, { workId: work?.id, resumeId: props.resumeId })
        )}`,
      });
    };
    return {
      works,
      toWorkExperience,
    };
  },
};
</script>
